import React from 'react';
import {Icon, NavBar} from "antd-mobile";
import "./css/style.less";
import history from "../../util/router/history";
import {UserInfoStore} from "./store";
import {inject, observer} from "mobx-react";
import {RouteComponentProps} from "react-router";
import DataLoading from "../../util-biz/loading-data";
import ErrorPage from "../../util-biz/error";
import UserForm from "./component/user-form";

interface IUserInfoProps extends RouteComponentProps<{id: string}>{
  userInfoStore?: UserInfoStore | any;
}

@inject('userInfoStore')
@observer
export default class UserInfo extends React.Component<IUserInfoProps, any> {

  async componentDidMount(): Promise<void> {
    await this.props.userInfoStore.initUserInfo();
  }

  render() {
    const {userInfo, userStatus} = this.props.userInfoStore;
    if (userInfo === null) {
      if (userStatus === 1) {
        return <DataLoading />;
      } else {
        return <ErrorPage tips="用户不存在或出错啦..."/>;
      }
    }
    return (
      <div className="my-content-box margin-bottom-10">
        {/* 导航栏 */}
        <NavBar
          mode="dark"
          icon={<Icon type="left" />}
          onLeftClick={history.goBack}
        >
          修改基本信息
        </NavBar>

        <UserForm />
      </div>
    );
  }

}
